var KeFuServerUI = (function () {
	var dialogTpl = '<div class="dialogPanel" id="<%=join_id%>" style="display:none;"><div class="dpHead js-dpHead">';
	dialogTpl += '<h3 class="title"><span class="username">与 <%=username%> 交谈中</span></h3><div class="toolBar">';
	dialogTpl += '<a href="javascript:;" class="tBtn tBtnRed js-disconnect">断开</a><a href="javascript:;" class="tBtn tBtnBlue js-handover">转接</a></div>';
	dialogTpl += '</div><div class="dpBody"><div class="dpMain js-dpMain"><ul class="msgList js-msgList"></ul><div class="kfInputBox js-inputBox">';
	//dialogTpl += '<div class="ibhandle js-ibhandle"></div><div class="ibTopBar js-ibTopBar"></div>';
	//dialogTpl += '<textarea name="message" class="msgInput js-msgInput" cols="30" rows="10" placeholder="请输入消息内容！"></textarea>';
	dialogTpl += '<script id="um<%=join_id%>" name="message" type="text/plain" style="height:120px;"></script>';
	dialogTpl += '<div class="ibBotBar js-ibBotBar"><button type="button" class="kBtn js-sendMsgBtn">发送</button>';
	dialogTpl += '<a href="javascript:;" class="kBtnLink js-endMsgBtn">结束通话</a></div></div></div><div class="dpSide js-dpSide">';
	dialogTpl += '<div class="callerInfoBox"><!--访客基本信息--><div class="callerInfo js-callerInfo"></div></div>';
	dialogTpl += '<div class="quickInputBox js-quickInputBox"><!--常用语管理--></div></div></div></div>';
	var msgTpl = '<li id="k<%=id%>" class="msgLi<%if(type == 1){%> msgRt<%}%>"><div class="mLabel"><span class="triangle"></span>';
	msgTpl += '<div class="mHead"><strong class="mTit"><%=username%></strong><span class="mTime"><%=time%></span></div>';
	msgTpl += '<div class="mContent"><%=message%></div></div></li>';
	var preMsgTpl = '<li id="k<%=id%>" class="msgLi preMsg"><div class="mLabel"><span class="triangle"></span><div class="mHead"><strong class="mTit"><%=username%></strong><span class="mTime"><%=time%></span></div><div class="mContent"><%=message%></div></div></li>';
	var callerLiTpl = '<li class="cli js-openDialog" id="<%=id%>">';
	callerLiTpl += '<div class="callerLabel">';
	callerLiTpl += '<i class="stateIco"></i><span class="title"><%=username%></span><span class="msgNum hide"><%if(num>0){%><%=num%><%}%></span></div></li>';

	var callerInfoBoxTpl = '<div class="callInfoDiv"><table class="callerInfoTable"><tr><td class="attrName">用户名</td><td class="attrVal"><%=username%></td></tr>';
	callerInfoBoxTpl += '<tr><td class="attrName">用户类型</td><td class="attrVal"><%=usertype%></td></tr>';
	callerInfoBoxTpl += '<tr><td class="attrName">IP</td><td class="attrVal"><%=ip%></td></tr>';
	callerInfoBoxTpl += '</table></div>';

	function Module() {
		var me = this;
		me.adminJoinId = null;
		me.winWidth = null;
		me.winHeight = null;
		me.$kfSec = null;
		me.$callerList = null;
		me.$kfLeft = null;
		me.$configForm = null;
		me.$kfTop = null;
		me.$kfLeft = null;
		me.$kfMain = null;
		me.$sysMsgBox = null;
		me.$sysMsgList = null;
		me.$dialogBox = null;
		me.currentCallerJoinId = null;
		me.dialogList = {};
	}

	Module.prototype.setWinSize = function () {
		this.winWidth = $(window).width();
		this.winHeight = $(window).height();
	};

	// 将消息列表的滚动条，滚动到最下方。
	Module.prototype.messageListScrollToBottom = function (callerJoinId) {
		var $msgList = this.getDialogElement(callerJoinId, '$msgList');
		if ($msgList && $msgList[0]) {
			$msgList[0].scrollTop = $msgList[0].scrollHeight;
		}
	};

	Module.prototype.renderView = function () {
		var me = this;
		var lftHt,
			lftWt,
			mainHt,
			mainWt,
			dlgHt;
		lftHt = mainHt = me.winHeight - me.$kfTop.height();
		lftWt = me.$kfLeft.width();

		mainWt = me.winWidth - lftWt;
		dlgHt = mainHt - me.$sysMsgBox.height();
		me.$kfLeft.height(lftHt);
		me.$kfMain.width(mainWt).height(mainHt);
		me.$dialogBox.height(dlgHt);
	};

	Module.prototype.initView = function () {
		var me = this;
		me.setWinSize();
		me.$kfSec = $('#kfSec');
		me.$callerList = $('#callerList');
		me.$configForm = $('#configForm');
		me.$kfSec.width(me.winWidth).height(me.winHeight);
		me.$kfTop = me.$kfSec.find('.kfTop');
		me.$kfLeft = me.$kfSec.find('.kfLeft');
		me.$kfMain = $('#kfMain');
		me.$sysMsgBox = $('#sysMsgBox');
		me.$sysMsgList = $('#sysMsgList');
		me.$dialogBox = $('#dialogBox');

		me.renderView();
	};

	Module.prototype.initDialogWindow = function (uo) {
		var me = this,
			joinId = uo.join_id;
		if (me.currentCallerJoinId === null) {
			me.currentCallerJoinId = joinId;
		}
		var compiled = _.template(dialogTpl);
		var ml = compiled(uo);
		me.$dialogBox.append(ml);

		var umId = 'um'+joinId,
			um = UM.getEditor(umId);

		var $box = $('#' + joinId),
			obj = {
				talkId: uo.talkId,
				joinId: joinId,
				$box: $box,
				$dpMain: $box.find('.js-dpMain'),
				$dpSide: $box.find('.js-dpSide'),
				$msgList: $box.find('.js-msgList'),
				$inputBox: $box.find('.js-inputBox'),
				//$msgInput: $box.find('.js-msgInput'),
				$sendMsgBtn: $box.find('.js-sendMsgBtn'),
				$endMsgBtn: $box.find('.js-endMsgBtn'),
				editor: um
			};
		me.renderDialog(obj);
		me.dialogList[joinId] = obj;
		return obj;
	};

	Module.prototype.showDialog = function (dialogId) {
		$('#' + dialogId).show();
		this.activeCallerLi(dialogId);
	};

	Module.prototype.hideDialog = function (dialogId) {
		this.deactiveCallerLi(dialogId);
		$('#' + dialogId).hide();
	};

	Module.prototype.renderDialog = function (obj) {
		var me = this,
			$dpHead = obj.$box.find('.js-dpHead'),
			dpWidth = me.$kfMain.width() - obj.$dpSide.width(),
			dpHeight = me.$kfMain.height() - $dpHead.height() - me.$sysMsgBox.height(),
			mlHeight = dpHeight - obj.$inputBox.height();
		obj.$msgList.height(mlHeight);
		obj.$dpMain.width(dpWidth).height(dpHeight);
		obj.$dpSide.height(dpHeight);
		obj.editor && obj.editor.setWidth(dpWidth);
	};

	// 从对话空窗缓存列表里获取某一对话窗
	Module.prototype.getDialog = function (dialogKey) {
		var me = this,
			obj = null;
		if (me.dialogList[dialogKey]) {
			obj = me.dialogList[dialogKey];
		}
		return obj;
	};

	// 从对话空窗获取的某一个键值
	Module.prototype.getDialogElement = function (dialogKey, elmKey) {
		var me = this,
			$elm = null,
			dlgObj = me.getDialog(dialogKey);
		if (dlgObj && dlgObj[elmKey]) {
			$elm = dlgObj[elmKey];
		}
		return $elm;
	};

	Module.prototype.clearMessageInput = function (joinId) {
		//var $msgInput = this.getDialogElement(joinId, '$msgInput');
		//if ($msgInput) $msgInput.val('');
		var editor = this.getDialogElement(joinId, 'editor');
		if (editor) {
			editor.reset();
			editor.setContent('');
		}
	};

	// 在对话框内设置消息
	Module.prototype.buildMessageHtml = function (jo, adminJoinId) {
		var ml = '';
		if (jo) {
			var msgFrom = jo.from || jo.join_id;
			if(msgFrom === adminJoinId) {
				jo.type = 1;
			} else {
				jo.type = 2;
			}
			var compiled = _.template(msgTpl);
			ml = compiled(jo);
		}
		return ml;
	};

	// 访客输入内容预读
	Module.prototype.callerMessagePrefetch = function (jo) {
		if (jo) {
			var me = this,
				$id = $('#k' + jo.id),
				$msgList = me.getDialogElement(jo.from, '$msgList');

			if ($id.size() > 0) {
				$id.find('.mContent').html(jo.message);
			} else {
				var compiled = _.template(preMsgTpl);
				var ml = compiled(jo);
				$msgList.append(ml);
			}
		}
	};

	Module.prototype.setNewCaller = function (uo) {
		if (uo) {
			var me = this,
				liId = 'c' + uo.join_id,
				$li = $('#' + liId);
			if ($li.size() == 0) {
				uo.id = liId;
				uo.num = 0;
				var compiled = _.template(callerLiTpl);
				var li = compiled(uo);
				me.$callerList.append(li);
				$('#' + liId).data('userinfo', uo);
			}
		}
	};

	Module.prototype.activeCallerLi = function (callerJoinId) {
		var liId = 'c' + callerJoinId;
		$('#' + liId).addClass('active');
	};

	Module.prototype.setCallerUnreadNum = function (callerJoinId, num) {
		var liId = 'c' + callerJoinId,
			$msgNum = $('#' + liId).find('.msgNum');
		$msgNum.text(num);
		if (num > 0) {
			$msgNum.removeClass('hide');
		} else {
			$msgNum.addClass('hide');
		}
	};

	Module.prototype.deactiveCallerLi = function (callerJoinId) {
		var liId = 'c' + callerJoinId;
		$('#' + liId).removeClass('active');
	};

	/**
	 * 创建用户信息
	 * @param userInfo
	 */
	Module.prototype.buildCallerInfoBox = function (userInfo) {
		var html = '';
		if(userInfo) {
			var compiled = _.template(callerInfoBoxTpl);
			if(userInfo.uid > 0) {
				userInfo.usertype = '本站会员<a href="order.php?act=list&user_id='+userInfo.uid+'" target="_blank">查看订单</a>';
			} else {
				userInfo.usertype = '游客';
			}
			html = compiled(userInfo);
		}
		return html;
	};

	return Module;
})();